<template>
  <div :class="[scrool && show == false ? 'header_top' : 'header_bottom']" class="header">
    <div class="clear">
      <div class="left">瑞鼎法拍网</div>
      <div class="right">
        <div class="title">
          <span :class="[scrool && show == false ? 'home_page' : '']">
            <router-link :to="{ path: '/pc_index' }" tag="span">首页</router-link>
          </span>

          <router-link :to="{ path: '/allRooms' }" tag="span">全部房产</router-link>
          <router-link :to="{ path: '/loan' }" tag="span">法拍贷款</router-link>
          <router-link :to="{ path: '/aboutUs' }" tag="span">关于我们</router-link>
          <!-- <router-link :to="{ path: '/loan' }" tag="span">联系我们</router-link> -->
          <!-- <router-link :to="{ path: '/my' }" tag="span">个人中心</router-link> -->
        </div>
        <div>
          <span class="phone">热线电话 ：010-85181606</span>
          <span @click="submitForm()" v-if="!photo">
            <img
              :src="[
                scrool && show == false
                  ? require(`@/assets/img/man_icon.png`)
                  : require(`@/assets/img/dl.png`)
              ]"
              alt
              class="man_img"
            />
            <span>登录 | 注册</span>
          </span>
          <span v-if="photo">
            <span @click="Onphoto()">
              <img
                :src="[
                  scrool && show == false
                    ? require(`@/assets/img/man_icon.png`)
                    : require(`@/assets/img/dl.png`)
                ]"
                alt
                class="man_img"
              />
              {{ photo }}
            </span>
            <span @click="Onsignout">退出</span>
          </span>
        </div>
      </div>
    </div>
    <!-- 登录弹框 -->
    <!-- :visible.sync="dialogTableVisible" -->

    <el-dialog
      :visible.sync="dialogTableVisible"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="30%"
      class="sign_dialog"
      :close-on-click-modal="true"
    >
      <LoginName v-on:OndialogTable="Ondiong" />
    </el-dialog>
  </div>
</template>
<script>
import LoginName from "@/components/pc_file/dialog/sign.vue";
export default {
  props: ["show"],
  data() {
    return {
      scrool: true,
      dialogTableVisible: false,
      photo: sessionStorage.getItem("photo")
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    // console.log(this.$route.path);
  },
  methods: {
    handleScroll() {
      let scrollY = document.documentElement.scrollTop;
      if (scrollY > 100) {
        this.scrool = false;
      } else {
        this.scrool = true;
      }
    },
    submitForm() {
      this.dialogTableVisible = true; //默认页面不显示为false,点击按钮将这个属性变成true
    },
    Ondiong() {
      console.log("111");
      // childValue就是子组件传过来的值
      this.dialogTableVisible = false;
      this.photo = sessionStorage.getItem("photo");
    },
    Onphoto() {
      this.$router.push({ name: "my", query: { id: "1" } });
    },
    Onsignout() {
      this.instance
        .fastLogout({})
        .then(res => {})
        .catch(function(error) {});
      sessionStorage.setItem("token", "");
      sessionStorage.setItem("photo", "");
      sessionStorage.setItem("userId", "");
      this.photo = "";
      if (this.$route.path == "/my") {
        this.$router.push({
          name: "pc_index"
        });
      }
      this.$message({
        message: "已退出"
      });
    }
  },
  components: { LoginName }
};
</script>
<style lang="less">
.header_bottom {
  color: #222;
  background: #fff;
}
.header_top {
  color: #fff;
}
.header {
  cursor: pointer;
  position: fixed;
  // padding: 0 360px;
  z-index: 6;
  // overflow: hidden;
  height: 80px;
  // width: 1200px;
  line-height: 80px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  .clear {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
  }
  .left {
    float: left;
    opacity: 1;
    font-size: 33px;
    font-weight: bold;
  }
  .right {
    float: right;
    display: flex;
    opacity: 1;
    .title > span {
      margin-right: 20px;
      cursor: pointer;
    }
    .phone {
      margin: 0 13px;
    }
    .man_img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-right: 3px;
    }
  }
  .home_page {
    .router-link-active {
      text-decoration: none;
      color: #fff;
      border-bottom: 2px solid #fff;
      padding-bottom: 15px;
    }
  }
  .router-link-active {
    text-decoration: none;
    color: #f58058;
    border-bottom: 2px solid #f58058;
    padding-bottom: 15px;
  }
}
.sign_dialog {
  .el-dialog {
    width: 454px !important;
  }
}
</style>
